<template>
  <div id="app">
    <div id="nav">
      <!-- 声明式 -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>

      <!-- 通过js实现导航叫编程式 -->
      <button @click="toAbout">toAbout</button>
      <!-- <button @click="toMine">点击</button> -->
      <router-link to="/Mine"></router-link>

      <button @click="forwardTwo">前进两个</button>
      <button @click="backTwo">后退两个</button>
    </div>
    <router-view />
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
// router、routes、route的区别
// 1.router：一般指的是路由实例。如：路由编程式导航的$router.push()

// 2.routes：指创建vue-router路由实例的配置项。用来配置多个route路由对象

// 3.route：指路由对象。如：this.$route指的就是当前路由对象

// $route:描述当前路由的对象，对象里面是属性path name query params 等属性
// $router:路由管理者，里面是方法供使用

// 方法：1、push():往栈中添加一个路由，并且会被浏览器记录
// push:{"路由名字"}
// push("路径")
// push({path:"",query:{}})

// 2、replace()替换当前路由，不会被浏览器记录

// 3、go()参数是一个数字
//  go(2)前进两步
//  go(-2)后退两步

export default {
  watch: {
    $route (to, from) {
      console.log(to)
      console.log(from)
    }
  },
  components: {
    HelloWorld
  },
  methods: {
    toAbout () {
      // 调用push()
      // this.$router.push('About');
      // this.$router.push("/About");
      // this.$router.push({ path: "/About", query: { id: 1 } });
      this.$router.push({ name: 'about', params: { id: 1 } })
      this.$router.replace('about')
    },
    // toMine () {
    //   this.$router.push('/Mine')
    // },
    forwardTwo () {
      this.$router.go(2)
    },
    backTwo () {
      this.$router.go(-2)
    }
  }
}
</script>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
